$(function() {
	/*
	 * number of fieldsets
	 */
	var fieldsetCount = $('#formElem').children().length;

	/*
	 * current position of fieldset / navigation link
	 */
	var current = 1;

	/*
	 * sum and save the widths of each one of the fieldsets set the final sum as
	 * the total width of the steps element
	 */
	var stepsWidth = 0;
	var widths = new Array();
	$('#steps .step').each(function(i) {
		var $step = $(this);
		widths[i] = stepsWidth;
		stepsWidth += $step.width();
	});
	$('#steps').width(stepsWidth);

	/*
	 * to avoid problems in IE, focus the first input of the form
	 */
	$('#formElem').children(':first').find(':input:first').focus();

	/*
	 * show the navigation bar
	 */
	$('#navigation').show();

	var height1 = $('#lay').height();
	var height2 = $('#run').height();

	$('#wrapper').height(height1);
	/*
	 * when clicking on a navigation link the form slides to the corresponding
	 * fieldset
	 */
	$('#navigation a').bind(
			'click',
			function(e) {
				var $this = $(this);
				var prev = current;
				$this.closest('ul').find('li').removeClass('selected');
				$this.parent().addClass('selected');
				/*
				 * we store the position of the link in the current variable
				 */
				current = $this.parent().index() + 1;
				/*
				 * animate / slide to the next or to the corresponding fieldset.
				 * The order of the links in the navigation is the order of the
				 * fieldsets. Also, after sliding, we trigger the focus on the
				 * first input element of the new fieldset If we clicked on the
				 * last link (confirmation), then we validate all the fieldsets,
				 * otherwise we validate the previous one before the form slided
				 */
				$('#steps').stop().animate(
						{
							marginLeft : '-' + widths[current - 1] + 'px'
						},
						500,
						function() {
							if (current == fieldsetCount)
								validateSteps();
							else
								validateStep(prev);
							$('#formElem').children(
									':nth-child(' + parseInt(current) + ')')
									.find(':input:first').focus();
						});
				e.preventDefault();
			});

	/*
	 * clicking on the tab (on the last input of each fieldset), makes the form
	 * slide to the next step
	 */
	$('#formElem > fieldset').each(
			function() {
				var $fieldset = $(this);
				$fieldset.children(':last').find(':input').keydown(
						function(e) {
							if (e.which == 9) {
								$(
										'#navigation li:nth-child('
												+ (parseInt(current) + 1)
												+ ') a').click();
								/* force the blur for validation */
								$(this).blur();
								e.preventDefault();
							}
						});
			});

	/*
	 * validates errors on all the fieldsets records if the Form has errors in
	 * $('#formElem').data()
	 */
	function validateSteps() {
		var FormErrors = false;
		for ( var i = 1; i < fieldsetCount; ++i) {
			var error = validateStep(i);
			if (error == -1)
				FormErrors = true;
		}
		$('#formElem').data('errors', FormErrors);
	}

	/*
	 * validates one fieldset and returns -1 if errors found, or 1 if not
	 */
	function validateStep(step) {
		if (step == fieldsetCount)
			return;

		var error = 1;
		var hasError = false;
		$('#formElem').children(':nth-child(' + parseInt(step) + ')').find(
				':input:not(button)').each(function() {
			var $this = $(this);
			var valueLength = jQuery.trim($this.val()).length;

			if (valueLength == '') {
				hasError = true;
				$this.css('background-color', '#FFEDEF');
			} else
				$this.css('background-color', '#FFFFFF');
		});
		var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
		$link.parent().find('.error,.checked').remove();

		var valclass = 'checked';
		if (hasError) {
			error = -1;
			valclass = 'error';
		}
		$('<span class="' + valclass + '"></span>').insertAfter($link);

		return error;
	}

	/*
	 * if there are errors don't allow the user to submit
	 */
	$('#startButton').bind('click', function() {
		var height1 = $('#lay').height();
		var height2 = $('#run').height();
		$('#lay').stop().animate({
			marginTop : '-'+height1+'px'
		}, 500, function() {
		});
		$('#wrapper').stop().animate({
			height : height2+'px'
		}, 500, function() {
		});
	//	e.preventDefault();
		 return false; 
		/*
		 * if($('#formElem').data('errors')){ alert('Please correct the errors
		 * in the Form'); return false; }
		 */
	});
});